<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../../static/img/icon-Get-into@3.png" class="back-btn" @click="goBack"></image>
			<text class="header-title">市运营招商管理</text>
			<text class="filter-btn" @click="showFilter">筛选</text>
		</view>
		
		<!-- 标签页导航 -->
		<view class="tab-nav">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === index }"
				v-for="(tab, index) in tabList" 
				:key="index"
				@click="switchTab(index)"
			>
				<text class="tab-text">{{ tab.name }}</text>
				<view class="tab-line" v-if="index < tabList.length - 1"></view>
			</view>
		</view>
		
		<!-- 团队管理 -->
		<view class="content-wrapper" v-if="activeTab === 0">
			<scroll-view class="team-list" scroll-y>
				<view class="team-item" v-for="(team, index) in teamList" :key="index">
					<view class="team-header" @click="toggleTeamDetail(index)">
						<text class="team-name">{{ team.name }}</text>
						<view class="team-info">
							<text class="member-count">成员：<text class="highlight">{{ team.memberCount }}人</text></text>
							<image class="arrow-icon" src="../../../static/img/o2o/icon-xia@2x.png"></image>
						</view>
					</view>
					
					<view class="team-detail" v-if="team.showDetail">
						<view class="detail-info">
							<view class="info-item">
								邀请码：<text class="info-value">{{ team.inviteCode }}</text>
								<text class="copy-btn" @click="copyInviteCode(team.inviteCode)">复制</text>
							</view>
							<view class="info-item">
								管理员：<text class="info-value">{{ team.admin }}</text>
							</view>
							<view class="info-item">
								创建时间：<text class="info-value">{{ team.createTime }}</text>
							</view>
						</view>
						<view class="action-buttons">
							<text class="action-btn view-btn" @click="viewMembers(team)">查看成员</text>
							<text class="action-btn edit-btn" @click="editTeam(team)">编辑</text>
							<text class="action-btn delete-btn" @click="deleteTeam(team)">删除</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="create-team-btn" @click="createTeam">
				<text class="create-text">创建新团队</text>
			</view>
		</view>
		
		<!-- 成员管理 -->
		<view class="content-wrapper" v-if="activeTab === 1">
			<view class="member-header">
				<text class="member-count-text">成员：{{ totalMembers }}人</text>
			</view>
			
			<scroll-view class="member-list" scroll-y>
				<view class="member-item" v-for="(member, index) in memberList" :key="index">
					<view class="member-info" @click="toggleMemberDetail(index)">
						<view class="member-avatar"></view>
						<view class="member-detail">
							<text class="member-name">{{ member.name }}</text>
							<text class="member-phone">{{ member.phone }}</text>
							<text class="member-team">所属团队：{{ member.teamName }}</text>
						</view>
						<view class="invite-info">
							<text class="invite-count">邀请：<text class="highlight">{{ member.inviteCount }}人</text></text>
							<image class="arrow-icon" src="../../../static/img/o2o/icon-xia@2x.png"></image>
						</view>
					</view>
					
					<view class="member-expand" v-if="member.showDetail">
						<view class="invite-stats">
							<view class="stat-item">
								<text class="stat-label">本月邀请人数</text>
								<text class="stat-value"><text class="highlight">{{ member.thisMonthInvite }}</text> 人</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">上月邀请人数</text>
								<text class="stat-value"><text class="highlight">{{ member.lastMonthInvite }}</text> 人</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">总邀请人数</text>
								<text class="stat-value"><text class="highlight">{{ member.totalInvite }}</text> 人</text>
							</view>
						</view>
						<view class="join-time">
							加入时间：<text class="time-value">{{ member.joinTime }}</text>
						</view>
						<view class="member-actions">
							<text class="action-btn edit-btn" @click="editMember(member)">编辑</text>
							<text class="action-btn delete-btn" @click="deleteMember(member)">删除</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 业绩管理 -->
		<view class="content-wrapper" v-if="activeTab === 2">
			<view class="performance-header">
				<text class="time-range">{{ performanceData.timeRange }}</text>
				<text class="total-performance">全部业绩，共计<text class="highlight">{{ performanceData.totalCount }}</text>人</text>
			</view>
			
			<scroll-view class="performance-list" scroll-y>
				<view class="performance-item" v-for="(item, index) in performanceList" :key="index">
					<view class="performance-info">
						<view class="member-avatar"></view>
						<view class="performance-detail">
							<text class="member-name">{{ item.name }}({{ item.role }})</text>
							<text class="member-phone">{{ item.phone }}</text>
							<text class="member-team">所属团队：{{ item.teamName }}</text>
							<text class="inviter">邀请人：{{ item.inviter }}</text>
							<text class="invite-time">邀请时间：{{ item.inviteTime }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 筛选弹窗 -->
		<view class="filter-mask" v-if="showFilterModal" @click="hideFilter">
			<view class="filter-panel" @click.stop>
				<view class="filter-content">
					<text class="filter-title">按身份查询成绩</text>
					<view class="filter-buttons">
						<text 
							class="filter-btn" 
							:class="{ active: selectedRole === role }"
							v-for="role in roleList" 
							:key="role"
							@click="selectRole(role)"
						>
							{{ role }}
						</text>
					</view>
					
					<text class="filter-title">按时间段查询成绩</text>
					<view class="date-range">
						<input 
							class="date-input" 
							type="text" 
							placeholder="开始日期"
							v-model="startDate"
							@click="showStartDatePicker"
						/>
						<text class="date-separator">至</text>
						<input 
							class="date-input" 
							type="text" 
							placeholder="结束日期"
							v-model="endDate"
							@click="showEndDatePicker"
						/>
					</view>
				</view>
				
				<view class="filter-actions">
					<text class="filter-action reset-btn" @click="resetFilter">重置</text>
					<text class="filter-action submit-btn" @click="applyFilter">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 日期选择器 -->
		<uni-datetime-picker 
			v-model="selectedDate" 
			type="date" 
			:clear-icon="false"
			@change="onDateChange"
			ref="datePicker"
		></uni-datetime-picker>
	</view>
</template>

<script>
	import { investmentApi } from '../../../api/index.js'
	
	export default {
		data() {
			return {
				activeTab: 2, // 默认显示业绩管理
				tabList: [
					{ name: '团队管理' },
					{ name: '成员管理' },
					{ name: '业绩管理' }
				],
				
				// 团队管理数据
				teamList: [
					{
						name: '团队名称',
						memberCount: 5,
						inviteCode: 'asdfgh',
						admin: 'sdkkfisd1123',
						createTime: '2022-10-12 19:10:30',
						showDetail: false
					}
				],
				
				// 成员管理数据
				totalMembers: 5,
				memberList: [
					{
						name: '李某某',
						phone: '18888888888',
						teamName: '测试院队',
						inviteCount: 24,
						thisMonthInvite: 10,
						lastMonthInvite: 14,
						totalInvite: 24,
						joinTime: '2012-12-12 19:30:30',
						showDetail: false
					}
				],
				
				// 业绩管理数据
				performanceData: {
					timeRange: '2020.10.10 - 2020.12.10',
					totalCount: 50
				},
				performanceList: [
					{
						name: '李某某',
						role: '市运营',
						phone: '18888888888',
						teamName: '测试院队',
						inviter: '张某欧',
						inviteTime: '2022-10-12 19:10:30'
					}
				],
				
				// 筛选相关
				showFilterModal: false,
				roleList: ['市运营', '合伙人', '商家', '厂家', '员工', '会员'],
				selectedRole: '市运营',
				startDate: '',
				endDate: '',
				selectedDate: '',
				datePickerType: '' // 'start' 或 'end'
			}
		},
		
		onLoad() {
			this.loadData();
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 切换标签页
			switchTab(index) {
				this.activeTab = index;
				this.loadData();
			},
			
			// 显示筛选弹窗
			showFilter() {
				this.showFilterModal = true;
			},
			
			// 隐藏筛选弹窗
			hideFilter() {
				this.showFilterModal = false;
			},
			
			// 选择角色
			selectRole(role) {
				this.selectedRole = role;
			},
			
			// 显示开始日期选择器
			showStartDatePicker() {
				this.datePickerType = 'start';
				this.$refs.datePicker.show();
			},
			
			// 显示结束日期选择器
			showEndDatePicker() {
				this.datePickerType = 'end';
				this.$refs.datePicker.show();
			},
			
			// 日期改变事件
			onDateChange(date) {
				if (this.datePickerType === 'start') {
					this.startDate = date;
				} else if (this.datePickerType === 'end') {
					this.endDate = date;
				}
			},
			
			// 重置筛选
			resetFilter() {
				this.selectedRole = '市运营';
				this.startDate = '';
				this.endDate = '';
			},
			
			// 应用筛选
			applyFilter() {
				// 这里可以调用API进行筛选
				console.log('筛选条件:', {
					role: this.selectedRole,
					startDate: this.startDate,
					endDate: this.endDate
				});
				this.hideFilter();
				this.loadData();
			},
			
			// 团队管理相关方法
			toggleTeamDetail(index) {
				this.teamList[index].showDetail = !this.teamList[index].showDetail;
			},
			
			copyInviteCode(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
			
			viewMembers(team) {
				uni.showToast({
					title: '查看成员功能',
					icon: 'none'
				});
			},
			
			editTeam(team) {
				uni.showToast({
					title: '编辑团队功能',
					icon: 'none'
				});
			},
			
			deleteTeam(team) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个团队吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			
			createTeam() {
				uni.navigateTo({
					url: '/pages/investment/add_team'
				});
			},
			
			// 成员管理相关方法
			toggleMemberDetail(index) {
				this.memberList[index].showDetail = !this.memberList[index].showDetail;
			},
			
			editMember(member) {
				uni.showToast({
					title: '编辑成员功能',
					icon: 'none'
				});
			},
			
			deleteMember(member) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个成员吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 加载数据
			async loadData() {
				try {
					// 根据当前标签页加载不同数据
					switch (this.activeTab) {
						case 0:
							await this.loadTeamData();
							break;
						case 1:
							await this.loadMemberData();
							break;
						case 2:
							await this.loadPerformanceData();
							break;
					}
				} catch (error) {
					uni.showToast({
						title: '加载数据失败',
						icon: 'none'
					});
				}
			},
			
			// 加载团队数据
			async loadTeamData() {
				// 这里调用团队列表API
				console.log('加载团队数据');
			},
			
			// 加载成员数据
			async loadMemberData() {
				// 这里调用成员列表API
				console.log('加载成员数据');
			},
			
			// 加载业绩数据
			async loadPerformanceData() {
				// 这里调用业绩列表API
				console.log('加载业绩数据');
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #EEEEEE;
		min-height: 100vh;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #FF5033;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.back-btn {
		width: 40rpx;
		height: 64rpx;
		margin-left: 30rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: white;
		margin-bottom: 0;
	}
	
	.filter-btn {
		position: absolute;
		right: 30rpx;
		top: 0;
		height: 100%;
		line-height: 88rpx;
		color: white;
		font-size: 30rpx;
	}
	
	.tab-nav {
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background-color: white;
		z-index: 998;
	}
	
	.tab-item {
		width: 33.3%;
		height: 80rpx;
		font-size: 32rpx;
		padding: 0 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tab-line {
		position: absolute;
		right: 0;
		top: 10rpx;
		width: 2rpx;
		height: 60rpx;
		background-color: #B2B1AC;
	}
	
	.tab-text {
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
	}
	
	.tab-item.active .tab-text {
		color: #FF2E00;
		border-bottom: 2rpx solid #FF2E00;
	}
	
	.content-wrapper {
		margin-top: 168rpx;
		padding-bottom: 180rpx;
	}
	
	/* 团队管理样式 */
	.team-list {
		height: calc(100vh - 348rpx);
	}
	
	.team-item {
		background-color: #fff;
		margin-top: 30rpx;
	}
	
	.team-header {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.team-name {
		font-size: 30rpx;
	}
	
	.team-info {
		display: flex;
		align-items: center;
	}
	
	.member-count {
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	
	.arrow-icon {
		width: 27rpx;
		height: 27rpx;
	}
	
	.team-detail {
		padding: 0 30rpx;
	}
	
	.detail-info {
		padding: 0 30rpx;
		color: #8F8F8F;
		padding-bottom: 20rpx;
	}
	
	.info-item {
		margin-top: 20rpx;
		font-size: 26rpx;
	}
	
	.info-value {
		color: #4B4B4B;
	}
	
	.copy-btn {
		color: #27b387;
		border: 2rpx solid #27b387;
		border-radius: 6rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	
	.action-buttons {
		width: 100%;
		color: #ff9600;
		padding: 15rpx 0;
		border-top: 2rpx solid #EEEEEE;
		border-bottom: 20rpx solid #eee;
		display: flex;
	}
	
	.action-btn {
		flex: 1;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
	}
	
	.view-btn {
		color: #27b387;
	}
	
	.edit-btn {
		border-left: 2rpx solid #EEEEEE;
		border-right: 2rpx solid #EEEEEE;
	}
	
	.create-team-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #ff9600;
		font-size: 36rpx;
		text-align: center;
		color: #fff;
		position: fixed;
		bottom: 0;
	}
	
	/* 成员管理样式 */
	.member-header {
		height: 90rpx;
		width: 100%;
		line-height: 90rpx;
		color: #8F8F8F;
		padding: 0 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	
	.member-count-text .highlight {
		color: #FF1E00;
	}
	
	.member-list {
		height: calc(100vh - 278rpx);
	}
	
	.member-item {
		background: #fff;
		margin-bottom: 20rpx;
	}
	
	.member-info {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}
	
	.member-avatar {
		width: 90rpx;
		height: 90rpx;
		background-image: url('../../../static/img/icon-mrtx@3x.png');
		background-size: 90rpx 90rpx;
		background-repeat: no-repeat;
		background-position: center;
		margin-right: 30rpx;
		border-radius: 50%;
	}
	
	.member-detail {
		flex: 1;
		color: #4B4B4B;
		font-size: 26rpx;
	}
	
	.member-name, .member-phone, .member-team {
		display: block;
		margin-bottom: 10rpx;
	}
	
	.member-team {
		color: #8F8F8F;
	}
	
	.invite-info {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		font-size: 28rpx;
	}
	
	.invite-count {
		margin-right: 20rpx;
	}
	
	.member-expand {
		border-top: 2rpx solid #ddd;
		padding: 20rpx 30rpx;
	}
	
	.invite-stats {
		padding: 20rpx;
		border: 2rpx solid #ddd;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
	}
	
	.stat-item {
		text-align: center;
		flex: 1;
	}
	
	.stat-label {
		display: block;
		margin-bottom: 10rpx;
	}
	
	.stat-value .highlight {
		color: #FF1E00;
	}
	
	.join-time {
		color: #8F8F8F;
		padding-top: 20rpx;
		font-size: 26rpx;
	}
	
	.time-value {
		color: #4B4B4B;
	}
	
	.member-actions {
		border-top: 2rpx solid #ddd;
		width: 100%;
		padding: 10rpx 0;
		display: flex;
	}
	
	.member-actions .action-btn {
		flex: 1;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #ff9600;
		font-size: 30rpx;
	}
	
	.member-actions .edit-btn {
		border-right: 2rpx solid #ddd;
		color: #27b287;
	}
	
	/* 业绩管理样式 */
	.performance-header {
		width: 100%;
		padding: 20rpx 30rpx;
		background: #fff;
		font-size: 28rpx;
	}
	
	.time-range {
		display: block;
		margin-bottom: 10rpx;
	}
	
	.total-performance .highlight {
		color: #FF1E00;
	}
	
	.performance-list {
		height: calc(100vh - 278rpx);
	}
	
	.performance-item {
		background: #fff;
		margin-top: 20rpx;
	}
	
	.performance-info {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: flex-start;
	}
	
	.performance-detail {
		flex: 1;
		color: #4B4B4B;
		font-size: 26rpx;
	}
	
	.performance-detail text {
		display: block;
		margin-bottom: 10rpx;
	}
	
	.performance-detail text:last-child {
		margin-bottom: 0;
	}
	
	.performance-detail text:first-child {
		color: #333;
	}
	
	.performance-detail text:not(:first-child):not(:nth-child(2)) {
		color: #8F8F8F;
	}
	
	/* 筛选弹窗样式 */
	.filter-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: flex-start;
		padding-top: 168rpx;
	}
	
	.filter-panel {
		width: 100%;
		height: 816rpx;
		background-color: #fff;
		position: relative;
	}
	
	.filter-content {
		padding: 34rpx 30rpx;
	}
	
	.filter-title {
		font-size: 28rpx;
		color: #4B4B4B;
		display: block;
		margin-bottom: 30rpx;
	}
	
	.filter-buttons {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}
	
	.filter-btn {
		width: 216rpx;
		height: 88rpx;
		text-align: center;
		color: #4B4B4B;
		font-size: 26rpx;
		line-height: 88rpx;
		border: 2rpx solid #4B4B4B;
		border-radius: 4rpx;
		margin-right: 33rpx;
		margin-bottom: 20rpx;
	}
	
	.filter-btn:nth-child(3n) {
		margin-right: 0;
	}
	
	.filter-btn.active {
		color: #FF9600;
		border-color: #FF9600;
	}
	
	.date-range {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	
	.date-input {
		width: 420rpx;
		height: 116rpx;
		line-height: 116rpx;
		padding: 20rpx;
		border: 2rpx solid #8F8F8F;
		font-size: 28rpx;
	}
	
	.date-separator {
		font-size: 28rpx;
		color: #4B4B4B;
		margin: 0 20rpx;
	}
	
	.filter-actions {
		width: 100%;
		height: 90rpx;
		border-top: 2rpx solid #DDDDDD;
		display: flex;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.filter-action {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 90rpx;
		font-size: 29rpx;
	}
	
	.reset-btn {
		color: #FF1E00;
	}
	
	.submit-btn {
		background-color: #FF9600;
		color: #fff;
	}
	
	.highlight {
		color: #FF1E00;
	}
</style>